<template>
    <view :style='{"width":"100%","padding":"12px","position":"relative","background":"#dfd8cc","height":"auto"}'>
        <view class="title"
            :style='{"padding":"10rpx 20rpx","marginTop":"10px","paddingBottom":"10px","paddingTop":"15px","color":"#98d457","borderRadius":"20rpx 20rpx 0 0","textAlign":"center","background":"#FFFFFF","lineHeight":"1.5","fontSize":"20px","fontWeight":"600"}'>
            {{detail.title}}
        </view>

        <view 
            :style='{"paddingLeft":"30px","paddingRight":"30px","paddingTop":"10px","margin":"0","alignItems":"center","background":"#FFFFFF","display":"flex","width":"100%","justifyContent":"center"}'>
            <view :style='{"padding":"0","width":"60%","textAlign":"start"}'>
                <text class="icon iconfont icon-geren16"
                    :style='{"margin":"0 4rpx 0 0","lineHeight":"1.5","fontSize":"16px","color":"#98d457"}'></text>
                <text :style='{"color":"#8a8a8a","lineHeight":"1.5","fontSize":"16px"}'>{{detail.name}}</text>
            </view>
            <view :style='{"padding":"0","width":"50%","textAlign":"end"}'>
                <text :style='{"color":"#8a8a8a","lineHeight":"1.5","fontSize":"12px"}'>{{detail.addtime}}</text>
            </view>
        </view>


        <view class="content"
            :style='{"width":"100%","paddingLeft":"30px","paddingRight":"30px","paddingTop":"20px","margin":"0","background":"#FFFFFF","height":"auto"}'>
            <rich-text :nodes="detail.content"></rich-text>
        </view>

        <view class="operate-box"
            :style='{"width":"100%","padding":"10px 10px","margin":"0","background":"#FFFFFF","height":"auto"}'>
            <view :style='{"padding":"0"}' class="operate" @click="likeClick">
                <text class="icon iconfont icon-zan10"
                    :style='{"margin":"0 4rpx 0 0","lineHeight":"1.5","fontSize":"16px","color":!likeType?"#666":"#98d457"}'></text>
                <text :style='{"color":"#666","lineHeight":"1.5","fontSize":"16px","marginLeft":"3px"}'>{{detail.thumbsupnum}}</text>
            </view>
            <view :style='{"padding":"0"}' class="operate"  @click="collectClick">
                <text class="icon iconfont icon-shoucang10"
                    :style='{"margin":"0 4rpx 0 0","lineHeight":"1.5","fontSize":"16px","color":!collectType?"#666":"#98d457"}'></text>
                <text :style='{"color":"#666","lineHeight":"1.5","fontSize":"16px","marginLeft":"3px"}'>{{detail.storeupnum}}</text>
            </view>
            <view :style='{"padding":"0"}' class="operate">
                <text class="icon iconfont icon-chakan9"
                    :style='{"margin":"0 4rpx 0 0","lineHeight":"1.5","fontSize":"16px","color":"#666"}'></text>
                <text :style='{"color":"#666","lineHeight":"1.5","fontSize":"16px","marginLeft":"3px"}'>{{detail.clicknum}}</text>
            </view>
        </view>

        <!-- <view
            :style='{"paddingLeft":"30px","paddingRight":"30px","margin":"0","paddingTop":"10px","background":"#FFFFFF","justifyContent":"space-between","display":"flex"}'>
            <view :style='{"display":"flex"}' @click="likeClick">
                <text class="icon iconfont"
                    :style='{"margin":"0 4rpx 0 0","lineHeight":"1.5","fontSize":"28rpx","color":likeType?"#666":"#98d457"}'
                    :class="likeType?'icon-zan10':'icon-zan10'"></text>
                <text :style='{"color":"#666","lineHeight":"1.5","fontSize":"28rpx"}'>{{likeType?'已':''}}赞</text>
            </view>
            <view :style='{"display":"flex"}' @click="collectClick">
                <text class="icon iconfont"
                    :style='{"margin":"0 4rpx 0 0","lineHeight":"1.5","fontSize":"28rpx","color":"#666"}'
                    :class="collectType?'icon-shoucang10':'icon-shoucang10'"></text>
                <text :style='{"color":"#666","lineHeight":"1.5","fontSize":"28rpx"}'>{{collectType?'已':''}}收藏</text>
            </view>
        </view> -->

        <div
            :style='{"padding":"0 40rpx","margin":"0 0 20rpx","borderRadius":"0 0 20rpx 20rpx ","background":"#FFFFFF","display":"flex","width":"100%","justifyContent":"space-between","height":"auto"}'>
            <div @click="prepDetailClick" :style='{"color":"#000000","lineHeight":"80rpx","fontSize":"28rpx"}'>上一篇：prev
            </div>
            <div @click="nextDetailClick" :style='{"color":"#666","lineHeight":"80rpx","fontSize":"28rpx"}'>下一篇：next
            </div>
        </div>


        <!-- 热门 -->
        <view class="hot"
            :style='{"width":"100%","margin":"0 0 12px","marginTop":"20px","overflow":"hidden","borderRadius":"20rpx","background":"#fff","height":"auto"}'>
            <view
                :style='{"padding":"0 12px","color":"#fff","textAlign":"center","background":"#98d457","width":"100%","lineHeight":"80rpx","fontSize":"17px"}'>
                热门信息</view>
            <view
                :style='{"padding":"0 20rpx 12px","flexWrap":"wrap","background":"#fff","display":"flex","width":"100%","justifyContent":"space-between","height":"auto"}'>
                <view v-for="(item,index) in hotList" :key="index"
                    :style='{"width":"48%","margin":"15px 0 0 0","background":"#fff","height":"auto"}'
                    @click="toDetail(item.id)">
                    <image :style='{"width":"100%","objectFit":"cover","borderRadius":"5px","display":"block","height":"200rpx"}'
                        mode="aspectFill" :src="baseUrl + item.picture"></image>
                    <view
                        :style='{"padding":"10px 5px","overflow":"hidden","text-overflow": "ellipsis","white-space": "nowrap","lineHeight":"50rpx","fontSize":"28rpx","color":"#000000","textAlign":"center"}'>
                        {{ item.title }}
                    </view>
                    <view
                        :style='{"padding":"0px 0px","lineHeight":"12px","fontSize":"12px","color":"#999","textAlign":"center"}'>
                        {{ item.addtime }}
                    </view>
                </view>
            </view>
        </view>
        <!-- 推荐 -->
        <view class="recommend"
            :style='{"width":"100%","overflow":"hidden","marginTop":"20px","borderRadius":"20rpx ","background":"#fff","height":"auto"}'>
            <view
                :style='{"padding":"0 12px","color":"#fff","textAlign":"center","background":"#98d457","width":"100%","lineHeight":"80rpx","fontSize":"17px"}'>
                推荐信息</view>
            <view
                :style='{"padding":"0 20rpx 12px","flexWrap":"wrap","background":"#fff","display":"flex","width":"100%","justifyContent":"space-between","height":"auto"}'>
                <view v-for="(item,index) in recommendList" :key="index"
                    :style='{"width":"48%","margin":"15px 0 0 0","background":"#fff","height":"auto"}'
                    @click="toDetail(item.id)">
                    <image :style='{"width":"100%","objectFit":"cover","borderRadius":"5px","display":"block","height":"200rpx"}'
                        mode="aspectFill" :src="baseUrl + item.picture"></image>
                    <view
                        :style='{"padding":"10px 5px","overflow":"hidden","text-overflow": "ellipsis","white-space": "nowrap","lineHeight":"50rpx","fontSize":"28rpx","color":"#000000","textAlign":"center"}'>
                        {{ item.title }}
                    </view>
                    <view
                        :style='{"padding":"0px 0px","lineHeight":"12px","fontSize":"12px","color":"#999","textAlign":"center"}'>
                        {{ item.addtime }}
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
    export default {
        data() {
            return {
                detail: {},
                id: '',
                likeType: false,
                likeForm: {},
                collectType: false,
                collectForm: {},
                allList: [],
                currentIndex: 0,
                hotList: [],
                recommendList: [],
            }
        },
        async onLoad(options) {
            this.id = options.id;
            this.getInfo()

            this.getHotList()
            this.getRecommendList()
        },
        computed: {
            baseUrl() {
                return this.$base.url;
            },
            userid() {
                return uni.getStorageSync('appUserid')
            }
        },
        methods: {
            async getInfo() {
                let res = await this.$api.info('news', this.id)
                res.data.content = res.data.content.replace(/<img/g, '<img style="width: 100%;"');
                this.detail = res.data;
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 100,
                })
                this.getLike()
                this.getCollect()
                res = await this.$api.list('news', {
                    page: 1,
                    limit: 100,
                    sort: 'addtime',
                    order: 'desc'
                })
                for (let x in res.data.list) {
                    if (res.data.list[x].id == this.id) {
                        this.currentIndex = Number(x)
                        break
                    }
                }
                this.allList = res.data.list

            },
            // 获取点赞状态
            async getLike() {
                let res = await this.$api.list('storeup', {
                    page: 1,
                    limit: 1,
                    type: 21,
                    userid: uni.getStorageSync('appUserid'),
                    refid: this.id,
                    tablename: 'news'
                })
                if (res.data.list.length) {
                    this.likeType = true
                    this.likeForm = res.data.list[0]
                } else {
                    this.likeType = false
                    this.likeForm = {}
                }
            },
            // 获取热门列表
            async getHotList() {
                let res = await this.$api.recommend('news', {
                    page: 1,
                    limit: 4,
                    sort: 'addtime',
                    order: 'desc'
                })
                this.hotList = res.data.list;
            },
            // 获取推荐列表	
            async getRecommendList() {
                let res;
                if (uni.getStorageSync("appUserid")) {
                    res = await this.$api.recommend2('news', {
                        page: 1,
                        limit: 4,
                        sort: 'addtime',
                        order: 'desc'
                    })
                } else {
                    res = await this.$api.recommend('news', {
                        page: 1,
                        limit: 4,
                        sort: 'addtime',
                        order: 'desc'
                    })
                }

                this.recommendList = res.data.list;
            },
            // 上一篇
            prepDetailClick() {
                if (this.currentIndex == 0) {
                    this.$message.error('已经是第一篇了')
                    return false
                }
                this.currentIndex--
                this.id = this.allList[this.currentIndex].id
                this.getInfo()
            },
            // 下一篇
            nextDetailClick() {
                if (this.currentIndex == this.allList.length - 1) {
                    this.$message.error('已经是最后一篇了')
                    return false
                }
                this.currentIndex++
                this.id = this.allList[this.currentIndex].id
                this.getInfo()
            },
            toDetail(id) {
                this.id = id
                this.getInfo()
            },
            // 获取收藏状态
            async getCollect() {
                let res = await this.$api.list('storeup', {
                    page: 1,
                    limit: 1,
                    type: 1,
                    userid: uni.getStorageSync('appUserid'),
                    refid: this.id,
                    tablename: 'news'
                })
                if (res.data.list.length) {
                    this.collectType = true
                    this.collectForm = res.data.list[0]
                } else {
                    this.collectType = false
                    this.collectForm = {}
                }
            },
            // 点赞按钮
            async likeClick() {
                let that = this
                if (this.likeType) {
                    uni.showModal({
                        title: '提示',
                        content: '是否取消点赞？',
                        async success(res) {
                            if (res.confirm) {
                                await that.$api.del('storeup', JSON.stringify([that.likeForm.id]))
                                that.$utils.msg('取消成功')
                                that.detail.thumbsupnum--
                                await that.$api.update('news', that.detail)
                                that.getLike()
                            }
                        }
                    })
                } else {
                    await that.$api.add('storeup', {
                        userid: uni.getStorageSync('appUserid'),
                        refid: this.id,
                        type: 21,
                        name: this.detail.title,
                        picture: this.detail.picture,
                        tablename: 'news',
                    })
                    this.$utils.msg('点赞成功')
                    that.detail.thumbsupnum++
                    await that.$api.update('news', that.detail)
                    this.getLike()
                }
            },
            // 收藏按钮
            async collectClick() {
                let that = this
                if (this.collectType) {
                    uni.showModal({
                        title: '提示',
                        content: '是否取消收藏？',
                        async success(res) {
                            if (res.confirm) {
                                await that.$api.del('storeup', JSON.stringify([that.collectForm.id]))
                                that.$utils.msg('取消成功')
                                that.detail.storeupnum--
                                await that.$api.update('news', that.detail)
                                that.getCollect()
                            }
                        }
                    })
                } else {
                    await that.$api.add('storeup', {
                        userid: uni.getStorageSync('appUserid'),
                        refid: this.id,
                        type: 1,
                        name: this.detail.title,
                        picture: this.detail.picture,
                        tablename: 'news',
                    })
                    this.$utils.msg('收藏成功')
                    that.detail.storeupnum++
                    await that.$api.update('news', that.detail)
                    this.getCollect()
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    page {
        background: #FFFFFF;
    }

    .title {
        text-align: center;
        font-size: 40upx;
        font-weight: bold;
    }

    .content {
        margin: 40upx;
        font-size: 30upx;
        line-height: 50upx;
        letter-spacing: 5upx;
    }

    .operateView {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .like_box {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;

            .icon {
                font-size: 36rpx;
                padding: 0 6rpx;
            }
        }

        .likeActive {
            color: #f00;
        }
    }

    .operate-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 50%;

        .operate {
            width: 16.5%;
            text-align: center;
        }
    }
</style>